<template>
  <el-container class="main_contain">
    <el-header class = "left_box">识别任务管理系统</el-header>
  <el-container direction = "horizontal">
    <el-aside width="200px">
      <el-menu
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      background-color="#e7e7e7"
      text-color="#777"
      active-text-color="#777"
      :default-active="activePath"
      :unique-opened="true"
      :router = true>
      <menuTree :menuList = "menuList"></menuTree>`
    </el-menu>
    </el-aside>
    <el-main>
        <router-view></router-view>
    </el-main>
  </el-container>
</el-container>
</template>

<script>
import MenuTree from '@/components/MenuTree'
export default {
  name: 'Main',
  data () {
    return {
      activePath: '',
      menuList: [
        {
          id: 1,
          parentId: 0,
          menuName: '任务管理',
          url: '',
          icon: 'el-icon-setting',
          orderNum: 1,
          open: 1,
          disabled: false,
          perms: null,
          type: 0,
          children: [
            {
              id: 2,
              parentId: 1,
              menuName: 'json列表',
              url: '/main/taskchoose',
              icon: 'el-icon-star-off',
              orderNum: 1,
              open: 0,
              disabled: false,
              type: 0,
              children: []
            },
            {
              id: 3,
              parentId: 1,
              menuName: '查看任务',
              url: '/main/tasklist',
              icon: 'el-icon-user',
              orderNum: 2,
              open: 0,
              disabled: false,
              type: 0,
              children: []
            },
            {
              id: 4,
              parentId: 1,
              menuName: '图片列表',
              url: '/main/imagechoose',
              icon: 'el-icon-star-off',
              orderNum: 1,
              open: 0,
              disabled: false,
              type: 0,
              children: []
            }
          ]
        }
      ]
    }
  },
  created () {
    this.activePath = this.$route.name
  },
  components: {
    MenuTree
  },
  methods: {
    handleOpen (key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose (key, keyPath) {
      console.log(key, keyPath)
    },
    savePath (path) {
      window.sessionStorage.setItem('activePath', path)
      // 调用Main.vue的activePath
      this.activePath = path
      console.log(this.activePath)
    }
  }
}
</script>
<style lang='less' scoped>
  .main_contain{
    height: 100%;
  }
 .el-header {
    background-color: #1da394;
    color: rgb(253, 252, 252);
    text-align: center;
    line-height: 60px;
    font-size: 20px;
  }

  .el-aside {
    background-color: #e7e7e7;
    color: #ccd4dd;
    /* line-height: 200px; */
    line-height: 100%;
    .el-menu {
      border-right:none;
    }
  }
  .el-main {
    background-color: #ffffff;
    color: #333;
    text-align: center;
    /* line-height: 200px; */
  }
</style>
